<!-- 预约时间 -->
<template>
  <div class="customized">
    <!-- 预约沟通的时间 -->
    <div class="shengri step">
      <div class="title">预约沟通的时间</div>
      <ul>
        <li>
          <span></span>
          <span @click="show=true">
            {{showData||'请选择时间'}}
            <van-icon name="arrow" />
          </span>
        </li>
      </ul>
      <van-popup v-model="show" position="bottom">
        <van-datetime-picker
          v-model="makeDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          :filter="filter"
          @confirm="dateConfirm"
        />
      </van-popup>
    </div>
    <div class="btnBox">
      <button class="btn" @click="submit">确定</button>
    </div>
    <van-popup v-model="gzh" class="gzh">
      <img src="@/assets/ewm.jpg">
      <p>扫码关注公众号<br>查看订单进度</p>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gzh:true,
      //预约时间
      minHour: 0,
      maxHour: 0,
      minDate: new Date(),
      maxDate: new Date(),
      makeDate: '',
      show: false,
      showData:''
    };
  },
  components: {},
  computed: {},
  mounted() {
    //最大时间设置在一年内
    this.maxDate = new Date(
      this.maxDate.setDate(this.maxDate.getDate() + 7)
    );

    if(new Date().getHours()>18){
      this.minDate.setDate(new Date().getDate()+1)
      this.minDate = new Date(this.minDate.setHours(9, 0, 0, 0))
    }
  },
  methods: {
    //设置日期格式
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      } else if (type === "minute") {
        return `${value}分`;
      }
      return value;
    },
    filter(type, options) {
      if (type === "hour") {
        return options.filter(option => option >= 9 && option<=20)
      }else if (type === 'minute') {
        return options.filter(option => option == 0 || option == 30 || option == 59)
      }
      return options;
    },
    dateConfirm(value) {
      var date = value;
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        date.getHours() +
        seperator2 +
        date.getMinutes()
        this.showData = currentdate
        this.show = false;
    },
    submit(){
      // const dateFilter = (value)=>{
      //   var date = new Date(value);
      //   var seperator1 = "-";
      //   var seperator2 = ":";
      //   var month = date.getMonth() + 1;
      //   var strDate = date.getDate();
      //   if (month >= 1 && month <= 9) {
      //     month = "0" + month;
      //   }
      //   if (strDate >= 0 && strDate <= 9) {
      //     strDate = "0" + strDate;
      //   }
      //   var currentdate =
      //     date.getFullYear() +
      //     seperator1 +
      //     month +
      //     seperator1 +
      //     strDate +
      //     " " +
      //     date.getHours() +
      //     seperator2 +
      //     date.getMinutes() 
      //     // +
      //     // seperator2 +
      //     // date.getSeconds();
      //     return currentdate
      // }
      console.log(this.showData)
      if(this.showData == ''){
        this.$toast.fail('请选择时间');
        return
      }
      const postData ={
        orderid:sessionStorage.getItem("orderid"),
        yuyue_time:this.showData
      }
      this.$api.saveyuyue(postData).then(()=>{
        this.$router.push('progress')
      })
      
    }
  },
  filters:{

    dateFilter(value){
      if(value){
      var date = new Date(value);
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        date.getHours() +
        seperator2 +
        date.getMinutes() 
        // +
        // seperator2 +
        // date.getSeconds();
         return currentdate
      }else{
        return '请选择时间'
      }
    }

  },
};
</script>
<style lang='less' scoped>
.customized {
  color: #373636;
}
.title {
  font-size: 24px;
  color: #373636;
  width: 100%;
  text-align: center;
  margin: 38px 0;
  display: inline-block;
}

.btnBox {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 15px;
  width: 100%;
  background: #fff;
  > div {
    width: 100%;
    span {
      color: #373636;
      font-size: 16px;
      .van-icon {
        font-size: 24px;
        vertical-align: middle;
      }
    }
    .btnmin {
      width: 247px;
      float: right;
    }
  }
}

.step {
  width: 100%;
  display: inline-block;
  position: relative;
  padding: 0 15px 80px;
}

.shengri {
  li {
    margin-bottom: 20px;
    span {
      width: 100%;
      font-size: 18px;
      display: inline-block;
      padding-left: 20px;
    }
    span:nth-child(2) {
      margin-top: 10px;
      border-radius: 40px;
      height: 40px;
      line-height: 40px;
      background: #f7f6f9;
      padding: 0 10px 0 20px;
      color: #373636;
      font-size: 16px;
      .van-icon {
        float: right;
        margin-top: 12px;
      }
    }
  }
}

.gzh{
  text-align: center;
  padding:10px;
  p{font-size: 14px}
  img{width: 160px;}
}
</style>